<template>
	<view class="content">
		<form @submit="formSubmit" @reset="formReset">
			<view class="inputView">
				<text class="leftTitle">添加简历图片（最多可添加6张）</text>
			</view>
			<view class="tagView">
				<image class="addPhotoV" mode="aspectFill" v-for="(item, index) in photoList" :key="index" :src="item">
				</image>
				<image class="addPhotoV" mode="center" @click="addPhotoClick" src="../../static/logo.png">
				</image>
			</view>
			<view class="uni-btn-v">
				<button class="botBtn" style="background-color: red;" @click="deleteImage">删除</button>
				<button class="botBtn" type="primary" form-type="submit">提交</button>
				<view class="tipText"> 注意事项: 请确保您填写的简历信息真实无误 </view>
			</view>
		</form>
	</view>
</template>

<script>
	import {
		config
	} from '@/common/config.js';
	export default {
		data() {
			return {
				photoList: [],
				tempFilePaths: [],
				photoSrc: [],
				hasImage: false,
			};
		},
		onLoad: function(e) {
			uni.setNavigationBarColor({
				frontColor: "#000000",
				backgroundColor: '#00b4b3'
			});
			uni.setNavigationBarTitle({
				title: "上传简历"
			})
		},
		methods: {
			addPhotoClick() {
				uni.chooseImage({
					success: (res) => {
						// 获取的格式是数组，多选会同时返回，单选只返回一项
						this.tempFilePaths = res.tempFilePaths;
						this.photoList = [...this.photoList, ...res.tempFilePaths];
						console.log(res.tempFilePaths)
						console.log(this.photoList);
						console.log(this.photoList[0]);

						// 若多选，需循环调用uni.uploadFile ，因微信小程序只支持单文件上传
					}
				});
			},
			formSubmit() {
				console.log("上传多少张图片");
				console.log(this.photoList.length);
				if (this.photoList.length > 6) {
					uni.showModal({
						title: "图片太多了",
						content: "请删除一些图片",
					})
				} else if (this.photoList.length == 0) {
					uni.showModal({
						title: "请添加图片",
						content: "当前没有图片",
					})
				} else {
					var myResume = []
					console.log("uni.getStorageSync(\"user\").username");
					console.log(uni.getStorageSync("user").username);
					this.photoList.forEach((item) => {
						uni.uploadFile({
							url: config.url + 'file/upload', 
							filePath: item,
							name: 'file',
							formData: {
								'username': uni.getStorageSync("user").username // 上传附带参数
							},
							success: (res) => {
								// 根据接口具体返回格式   赋值具体对应url
								console.log(res.data);
								if (JSON.parse(res.data).code == '-1') {
									uni.showModal({
										title: "当前图片已存在",
										content: "请勿重复提交"
									})
								} else {
									myResume.push(JSON.parse(res.data).data);
									uni.showLoading({
										title: '上传中'
									})
									setTimeout(function() {
										uni.hideLoading();
									}, 500);
									this.$u.toast("简历上传成功！");
									this.photoList=[]
								}

							}
						});
					})


				}
			},
			deleteImage() {
				if (this.photoList.length == 0) {
					uni.showModal({
						title: "没有可删除元素",
					})
				} else {
					this.photoList.pop();
					this.$u.toast("图片已删除");
				}

			}
		}
	};
</script>

<style>
	.uni-form-item .title {

		padding: 20rpx 0;

	}

	.content {

		display: flex;

		flex-direction: column;

		width: 100%;

		height: auto;

	}

	.inputView {

		flex-direction: row;

		display: flex;

		height: 40px;

		align-items: center;

		width: 100%;

	}

	.line {

		width: 90%;

		height: 2rpx;

		margin-left: -2rpx;

		background-color: #f8f8f8;

		margin-left: 5%;

	}

	.leftTitle {

		margin-left: 40rpx;

		width: 284px;

		height: 32px;

		line-height: 32px;

		font-size: 28rpx;

		color: #333333;

	}

	.rightTextarea {

		margin-left: 5%;

		width: 90%;

		height: 106px;

		line-height: 40rpx;

		border-radius: 12rpx;

		border: solid 1px #F5F5F5;

		font-size: 15px;

	}

	.addPhotoV {

		margin-top: 7px;

		margin-bottom: 7px;

		width: calc((100vw - 70px)/3);

		height: calc((100vw - 70px)/3.16);

		margin-left: 17.5px;

		border-radius: 12rpx;

		border: solid 1px rgba(58.04%, 76.08%, 88.24%, 0.6);

	}

	.uni-btn-v {

		width: 100%;

		height: auto;

	}

	.botBtn {

		width: 90%;

		margin-top: 36px;

		height: 48px;

	}

	.tipText {

		width: 100%;

		margin-left: 0px;

		text-align: center;

		color: #666666;

		margin-top: 36px;

		margin-bottom: 36px;

		font-size: 28rpx;

	}
</style>